@import "_reset";

body{
    height: 164.5333vw;
    background-color:#EAEBEF;
   
}
header{
    width: 100%;
    height: 11.2vw;

  background-color: #fff;
    span{
        
        height: 11.2vw;
        display: flex;
        
        align-items: center;
        justify-content: center;
        font-size: 4.2667vw;
        color: #555555;
    }
   
}
main{
    .user{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 49vw;
        background-image: url(../img/10-personal-center-page/背景.jpg);
        background-repeat: no-repeat;
        background-size: 100%,100% ;
        
        .wellcome{
            display: flex;
            align-items: center;
            
            color: #ffffff;
            .jpg{
                border: 2px solid #FFFFFF80;
                width: 17.0667vw;
                height: 17.0667vw;
                border-radius: 8.5333vw;
                margin-right: 3.7333vw;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 8.5333vw;
                }
            }
            
            span{
                font-size: 3.7333vw;
            }
            
        
        
        }
        .login{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32vw;
            height: 9.3333vw;
            color: #ffffff;
            
            
            span{
                font-size: 3.7333vw;
            }
        }

       
    }
    .order{
        margin: 0 auto;
        
        width: 96.5333vw;
        height: 31.7333vw;
        background-color: #ffffff;
        border-radius: 1.3333vw;
        .my-order{
            margin: 0 auto;
            margin-bottom: 3.7333vw;
            width: 89.8667vw;
            height: 8.2667vw;
            display: flex;
            justify-content: space-between;
            padding-top: 4vw;
            border-bottom: 1px solid #E9ECF0;
      
            span{
                font-size: 3.7333vw;
            }
        }

    }
    .status-query{
        max-width: 97vw;
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 10.6667vw;
        .box{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 5.3333vw;
            color: #555555;
            .text{
                font-size: 3.7333vw;
            }
        }
        .icon{
            font-size: 6.3333vw;
        }
    }
    .column{
        width: 97vw;
        max-width: 97vw;
        height: 35.4667vw;
        margin: 0 auto;
        margin-top: 1.3333vw;
        border-radius: 1.3333vw;
        background-color: #fff;
        .column-assembly{
            display: flex;
            max-width: 89vw;
            height: 35.4667vw;
            margin: 0 auto;
            flex-direction: column;
            justify-content: center;

            div{
                display: flex;
                align-items: center;
                height: 8.5333vw;
                
                &.get{
                    border-top: 1px solid #E9ECF0;
                    border-bottom: 1px solid #E9ECF0;
                }
                span{
                    font-size: 4.2667vw;
                    margin-left: 8vw;
                }
            }
        }
    }
}
 
footer{
    .tabar{
        width: 100%;
        height: 13.3333vw;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        position: fixed;
        bottom: 0;

        .tartree{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            
            width: 9.6vw;
            height: 11.2vw;
           
            span{
                font-size: 7vw;
                
                &.box-my{
                    color: #884E22;
                }
                &.text{
                    font-size: 3.2vw;
                }
                &.text.my{
                    color: #884E22;
                }
            }

        }
    }
    
}